<template>
  <div>
    <h1>$set</h1>
    <h1>{{ obj }}</h1>
    <button @click="test">增加属性</button>
    <h1>{{ arr }}</h1>
    <button @click="test1">给数组增加下标</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "hanhan",
      },
      arr: [
        {
          name: "hanhan",
          waimao: "很帅",
        },
        {
          name: "lele",
          waimao: "更帅！！",
        },
      ],
    };
  },
  methods: {
    test() {
      // this.obj.height = 190;
      // this.obj.name = "lele";
      this.$set(this.obj, "height", "190");
      /* 
      $set作用解决vue中数据双向绑定失效
      什么时候数据双向失效
      给对象新添加属性  该属性不是响应式

      */
    },
    test1() {
      /* this.arr[2] = {
        name: "mingming",
        waimao: "也帅",
      }; */
      this.$set(this.arr, 2, {
        name: "mingming",
        waimao: "也帅",
      });

      // $set 参数1：要更改的数据源（可以是对象可以是数组）  参数2：key或下标  参数3：value 新值
    },
  },
};
</script>

<style lang="scss" scoped>
</style>